<template>
  <div class="player">
    <el-container>
      <el-main class="player-main">
        <div class="player-wrapper">
          <div class="video-player">
            <!-- 视频播放器区域 -->
            <div class="video-container" ref="videoContainer">
              <video
                ref="videoPlayer"
                :src="currentVideo.src"
                controls
                autoplay
                @loadedmetadata="onVideoLoaded"
                @timeupdate="onTimeUpdate"
              >
                您的浏览器不支持视频播放
              </video>
            </div>

            <!-- 视频信息 -->
            <div class="video-info-section">
              <h1>{{ currentVideo.title }}</h1>
              <div class="episode-selector">
                <span>选集：</span>
                <el-button
                  v-for="episode in episodes"
                  :key="episode.id"
                  :type="episode.id === currentEpisode ? 'primary' : ''"
                  size="small"
                  @click="switchEpisode(episode.id)"
                >
                  第{{ episode.number }}集
                </el-button>
              </div>
              <div class="player-actions">
                <el-button @click="goToDetail">
                  <el-icon><Back /></el-icon>返回详情
                </el-button>
                <el-button>
                  <el-icon><Star /></el-icon>收藏
                </el-button>
                <el-button>
                  <el-icon><Share /></el-icon>分享
                </el-button>
              </div>
            </div>

            <!-- 播放器控制 -->
            <div class="player-controls">
              <el-button-group>
                <el-button @click="togglePlay">
                  <el-icon><CaretRight v-if="!isPlaying" /><CaretRight v-else /></el-icon>
                  {{ isPlaying ? '暂停' : '播放' }}
                </el-button>
                <el-button @click="toggleFullscreen">
                  <el-icon><Expand /></el-icon>
                  {{ isFullscreen ? '退出全屏' : '全屏' }}
                </el-button>
                <el-button>
                  <el-icon><Setting /></el-icon>
                  设置
                </el-button>
              </el-button-group>

              <div class="progress-info">
                <span>{{ formatTime(currentTime) }}</span>
                <el-progress
                  :percentage="progressPercentage"
                  :stroke-width="4"
                  style="width: 100%; margin: 0 10px"
                />
                <span>{{ formatTime(duration) }}</span>
              </div>

              <div class="speed-control">
                <span>倍速：</span>
                <el-select v-model="playSpeed" size="small" @change="onSpeedChange">
                  <el-option label="0.5x" value="0.5" />
                  <el-option label="0.75x" value="0.75" />
                  <el-option label="1.0x" value="1.0" />
                  <el-option label="1.25x" value="1.25" />
                  <el-option label="1.5x" value="1.5" />
                  <el-option label="2.0x" value="2.0" />
                </el-select>
              </div>
            </div>
          </div>

          <!-- 推荐视频 -->
          <div class="recommendations">
            <h2>猜你喜欢</h2>
            <div class="rec-list">
              <div
                v-for="video in recommendations"
                :key="video.id"
                class="rec-item"
                @click="goToDetail(video.id)"
              >
                <img :src="video.thumbnail" :alt="video.title" />
                <div class="rec-info">
                  <h4>{{ video.title }}</h4>
                  <p>{{ video.views }} 次播放</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  ElContainer,
  ElMain,
  ElButton,
  ElButtonGroup,
  ElIcon,
  ElProgress,
  ElSelect,
  ElOption
} from 'element-plus'
import { Back, Star, Share, Expand, Setting, CaretRight } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const videoContainer = ref(null)
const videoPlayer = ref(null)
const isPlaying = ref(false)
const isFullscreen = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const playSpeed = ref('1.0')
const currentEpisode = ref(1)

const currentVideo = ref({
  id: 1,
  title: '精彩影视剧集',
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
})

const episodes = ref([
  { id: 1, number: 1 },
  { id: 2, number: 2 },
  { id: 3, number: 3 },
  { id: 4, number: 4 },
  { id: 5, number: 5 }
])

const recommendations = ref([
  {
    id: 2,
    title: '推荐视频1',
    thumbnail: '/images/videos/微信图片_20251027113113.jpg',
    views: '10万'
  },
  {
    id: 3,
    title: '推荐视频2',
    thumbnail: '/images/videos/微信图片_20251027113113.jpg',
    views: '8万'
  }
])

const progressPercentage = computed(() => {
  if (duration.value === 0) return 0
  return (currentTime.value / duration.value) * 100
})

const onVideoLoaded = () => {
  duration.value = videoPlayer.value.duration
}

const onTimeUpdate = () => {
  currentTime.value = videoPlayer.value.currentTime
}

const togglePlay = () => {
  if (videoPlayer.value.paused) {
    videoPlayer.value.play()
    isPlaying.value = true
  } else {
    videoPlayer.value.pause()
    isPlaying.value = false
  }
}

const toggleFullscreen = () => {
  if (!isFullscreen.value) {
    if (videoContainer.value.requestFullscreen) {
      videoContainer.value.requestFullscreen()
    }
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
    isFullscreen.value = false
  }
}

const onSpeedChange = () => {
  videoPlayer.value.playbackRate = parseFloat(playSpeed.value)
}

const switchEpisode = (episodeId) => {
  currentEpisode.value = episodeId
  // 切换集数逻辑
}

const goToDetail = () => {
  router.push(`/detail/${currentVideo.value.id}`)
}

const formatTime = (time) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}

onMounted(() => {
  const videoId = route.params.id
  const episodeId = route.params.episodeId
  if (episodeId) {
    currentEpisode.value = parseInt(episodeId)
  }
})

onUnmounted(() => {
  if (isFullscreen.value) {
    document.exitFullscreen()
  }
})
</script>

<style scoped>
.player {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  background: #0a0a0a;
  color: #fff;
  margin: 0;
  padding: 0;
}

.player-main {
  padding: 40px 20px;
}

.player-wrapper {
  display: flex;
  gap: 40px;
  width: 100%;
  padding: 0 20px;
}

.video-player {
  flex: 1;
}

.video-container {
  width: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.video-info-section {
  margin-bottom: 20px;
}

.video-info-section h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.episode-selector {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.player-actions {
  display: flex;
  gap: 10px;
}

.player-controls {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 8px;
}

.progress-info {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recommendations {
  width: 360px;
  flex-shrink: 0;
}

.recommendations h2 {
  margin-bottom: 20px;
  font-size: 18px;
}

.rec-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rec-item {
  display: flex;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.3s;
}

.rec-item:hover {
  background: #1a1a1a;
}

.rec-item img {
  width: 120px;
  border-radius: 4px;
}

.rec-info h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

.rec-info p {
  font-size: 12px;
  color: #999;
}

@media (max-width: 768px) {
  .player-wrapper {
    flex-direction: column;
  }
  
  .recommendations {
    width: 100%;
  }
}
</style>

